<template>
  <div class="bottom-view">
    <el-card shadow="hover" class="view">
      <template #header>
        <div>关键词搜索</div>
      </template>

      <div class="search-view">
        <div class="chart-wrap">
          <div class="chart">
            <div class="title">搜索用户数</div>
            <div class="count">{{ lineChartData.totalUser }}</div>
            <v-chart
              :option="lineOption('userList', '搜索用户数')"
              autoresize
            ></v-chart>
          </div>
          <div class="chart">
            <div class="title">搜索量</div>
            <div class="count">{{ lineChartData.totalCount }}</div>
            <v-chart
              :option="lineOption('countList', '搜索量')"
              autoresize
            ></v-chart>
          </div>
        </div>
        <div class="search-table">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="rankNo" label="排名"> </el-table-column>
            <el-table-column prop="word" label="关键字"> </el-table-column>
            <el-table-column prop="count" label="搜索数量"> </el-table-column>
            <el-table-column prop="user" label="搜索用户数"> </el-table-column>
            <el-table-column prop="range" label="搜索占比"> </el-table-column>
          </el-table>
          <el-pagination
            layout="prev, pager, next"
            v-model:current-page="currentPage"
            v-model:page-size="limit"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>

    <el-card shadow="hover" class="view">
      <template #header>
        <div>分类销售排行</div>
        <el-radio-group size="small" v-model="radioSelect">
          <el-radio-button label="品类"></el-radio-button>
          <el-radio-button label="商品"></el-radio-button>
        </el-radio-group>
      </template>

      <div class="search-view">
        <v-chart :option="pieOption()" autoresize />
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
export default {
  name: "BottomView",
};
</script>

<script lang="ts" setup>
import { computed, ref } from "vue";
import useReportDataStore from "@/stores/reportData";

const reportDataStore = useReportDataStore();

const searchWord = computed(() => reportDataStore.reportData?.searchWord);
const saleRank = computed(() => reportDataStore.reportData?.saleRank);
const total = computed(() => searchWord.value?.length);
const currentPage = ref(1);
const limit = ref(5);
//对关键字搜索的数据处理 添加 排名和百分比信息
const tableTotalData = computed(() => {
  return searchWord.value?.map((item, index) => {
    return {
      ...item,
      rankNo: index + 1,
      range: ((item.user / item.count) * 100).toFixed(2) + "%",
    };
  });
});
//根据完整数据和页码 计算出当前要展示的内容
const tableData = computed(() => {
  return tableTotalData.value?.slice(
    (currentPage.value - 1) * limit.value,
    currentPage.value * limit.value
  );
});
//把数据添加为我们图标需要的格式
const lineChartData = computed(() => {
  const data = {
    wordList: [] as string[],
    userList: [] as number[],
    countList: [] as number[],
    totalUser: 0,
    totalCount: 0,
  };

  if (tableTotalData.value) {
    tableTotalData.value.forEach((item) => {
      data.wordList.push(item.word);
      data.userList.push(item.user);
      data.countList.push(item.count);
      data.totalUser += item.user;
      data.totalCount += item.count;
    });
  }
  return data;
});

const lineOption = (
  listName: "userList" | "countList",
  name: "搜索用户数" | "搜索量"
) => {
  return {
    xAxis: {
      data: lineChartData.value.wordList,
    },
    yAxis: {
      show: false,
    },
    series: [
      {
        type: "line",
        data:
          listName === "userList"
            ? lineChartData.value.userList
            : lineChartData.value.countList,
        smooth: true,
        areaStyle: {
          color: "gold",
        },
        itemStyle: {
          opacity: 0,
        },
        lineStyle: {
          color: "chocolate",
        },
      },
    ],

    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
    tooltip: {
      trigger: "axis",
    },
  };
};

const pieChartData = computed(() => {
  const data = {
    categoryList: [] as any[],
    cTotal: 0,
    goodsList: [] as any[],
    gTotal: 0,
  };

  if (saleRank.value) {
    const {
      category: { axisX, data1 },
      goods: { axisX: axisX2, data1: data2 },
    } = saleRank.value;
    const total = data1.reduce((pre, item) => pre + item, 0);
    data.cTotal = total;

    axisX.forEach((item, index) => {
      const percent = ((data1[index] / total) * 100).toFixed(2) + "%";
      data.categoryList.push({
        name: item + "|" + percent,
        value: data1[index],
        percent,
        labelName: item,
      });
    });

    const total2 = data2.reduce((pre, item) => pre + item, 0);
    data.gTotal = total2;
    axisX2.forEach((item, index) => {
      const percent = ((data2[index] / total2) * 100).toFixed(2) + "%";
      data.goodsList.push({
        name: item + "|" + percent,
        value: data2[index],
        percent,
        labelName: item,
      });
    });
  }

  return data;
});

const radioSelect = ref("品类");

const pieOption = () => {
  const { categoryList, cTotal, goodsList, gTotal } = pieChartData.value;
  const list = radioSelect.value === "品类" ? categoryList : goodsList;
  const total = radioSelect.value === "品类" ? cTotal : gTotal;

  return {
    title: [
      {
        text: `${radioSelect.value}分布`,
        textStyle: {
          fontSize: 14,
          color: "red",
        },
        left: 20,
        top: 30,
      },
      {
        text: "累计订单量",
        subtext: total,
        textStyle: {
          fontSize: 14,
          color: "#333",
        },
        subtextStyle: {
          fontSize: 26,
          color: "pink",
        },
        textAlign: "center",
        left: "35%",
        top: "45%",
      },
    ],

    //图例
    legend: {
      orient: "vertical",
      textStyle: {
        color: "blue",
      },
      left: "70%",
      top: "middle",
    },
    series: [
      {
        name: `${radioSelect.value}分布`,
        data: list,
        //饼状图
        type: "pie",
        //圆心位置
        center: ["35%", "50%"],
        //饼状图展示的大小
        radius: ["35%", "50%"],
        //间隔区域样式
        itemStyle: {
          borderColor: "#fff",
          borderWidth: 2,
        },
        //每个选项的标题
        label: {
          position: "outside", //label在圆的外侧
          //执行每个文本
          formatter: function (params: any) {
            return params.data.labelName;
          },
        },
        labelLine: {
          length: 3,
          lenght2: 8,
        },
      },
    ],
    tooltip: {
      trigger: "item", //在饼状图中是item
      //自定义toolTip文本
      formatter: function (params: any) {
        return `
        ${params.marker}${radioSelect.value}分布 <br/>
        ${params.marker}名称:${params.data.labelName} <br/>
        ${params.marker}数量:${params.data.value} <br/>
        ${params.marker}占比:${params.data.percent} <br/>
        `;
      },
    },
  };
};
</script>

<style lang="scss" scoped>
.bottom-view {
  display: flex;
  margin-top: 20px;

  .view {
    flex: 1;

    &:first-child {
      margin-right: 10px;
    }

    &:last-child {
      margin-left: 10px;
    }

    :deep(.el-card__header) {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60px;
    }

    .search-view {
      height: 450px;
      display: flex;
      flex-direction: column;

      .chart-wrap {
        display: flex;

        .chart {
          flex: 1;

          &:first-child {
            margin-right: 5px;
          }

          &:last-child {
            margin-left: 5px;
          }

          .title {
            font-size: 14px;
            color: #999;
          }

          .count {
            font-size: 22px;
            color: #333;
            font-weight: 500;
            letter-spacing: 2px;
          }

          .echarts {
            height: 50px;
          }
        }
      }

      .search-table {
        flex: 1;
        margin-top: 20px;

        .el-pagination {
          text-align: right;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
